import { useState, useEffect } from 'react';
import { Select } from 'antd';
/**
 * 推荐根据实际项目情况使用自定义z函数
 * 本示例提供了基于umi useIntl封装z函数hooks和umi getIntl封装的z函数纯函数用法供参考
 */
// import { useZuoyIntl } from 'zuoy-hooks';
import { useZuoyIntl } from '@/utils/zuoy';
// or 非hooks用法
// import { zuoyFunctionZ as z } from '@/utils/zuoy'
import { setLocale } from 'umi';

export default function IndexPage() {
  const [lang, setLang] = useState('zh-CN');
  const z = useZuoyIntl();
  useEffect(() => {
    setLocale(lang, false);
  }, [lang]);
  return (
    <div style={{ margin: 24 }}>
      <Select
        value={lang}
        onChange={(val) => setLang(val)}
        options={[
          { label: '简体中文', value: 'zh-CN' },
          { label: '英文', value: 'en-US' },
          { label: '葡文', value: 'pt-PT' },
        ]}
      />
      <br />
      {z('你好, {name}', { name: 'zuoy' })}
      <br />
      {z('世界和平')}
    </div>
  );
}
